<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="visible"
    width="700px"
    append-to-body
  >
    <el-form ref="form" :model="form" label-width="auto" :rules="rules">
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="form.name"
              placeholder="姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="电话"
              readonly
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属医院" prop="hospital">
            <el-input
              v-model="form.hospital"
              placeholder="所属医院"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input
              v-model="form.position"
              placeholder="职位"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="省份" prop="province">
            <el-input
              v-model="form.province"
              placeholder="省份"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市" prop="city">
            <el-input
              v-model="form.city"
              placeholder="城市"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="照片" prop="fileList">
            <div class="image-list">
              <div v-for="(file, index) in form.fileList" :key="index" class="image-item">
                <el-image 
                  style="width: 100px; height: 100px; margin-right: 10px;"
                  :src="file" 
                  :preview-src-list="form.fileList">
                </el-image>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as types from "./types";
import { editDoctor } from '@/api/doctor'

export default {
  name: "",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        hospital: [
          { required: true, message: "请输入所属医院", trigger: "blur" }
        ],
      },
      title: "",
      type: "",
      config: {
        edit: {
          func: editDoctor,
          title: "编辑"
        }
      },
      form: {
        name: "",
        mobile: "",
        hospital: "",
        position: "",
        province: "",
        city: "",
        fileList: []
      },
      visible: false,
      types
    };
  },
  methods: {
    showDialog(row) {
      this.reset();

      const isEdit = !!row;
      this.visible = true;
      this.type = isEdit ? "edit" : "new";
      this.title = this.config[this.type].title;

      if (isEdit) {
        this.form = Object.assign(this.form, row);
      }
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.visible = false;
          const data = JSON.parse(JSON.stringify(this.form));
          delete data.num;
          this.config[this.type]?.func(data).then(() => {
            this.$modal.msgSuccess("提交成功");
            this.visible = false;
            this.$emit("refresh");
          });
        } else {
          return false;
        }
      });
    },

    cancel() {
      this.visible = false;
      this.reset();
    },

    reset() {
      this.resetForm("form");
      this.$forceUpdate();
    },
  },
};
</script>
